<template>
  <div class="search-view"
    @scroll.stop.prevent
  >
    <div class="top-title border-bottom">
      <span class="i-wrapper" @click.stop="closeSearchView">
        <i class="iconfont icon-arrow-left" ></i>
      </span>
      <span class="search-box-wrapper">
        <search-box ref="searchBox" @query="setQuery"></search-box>
      </span>
      <span class="dosearch-wrapper" @click.stop="doSearch">
        搜索
      </span>
    </div>
    <div class="hot-search-wrapper" v-show="!query">
      <div class="hot-search">
        <h1 class="title">历史搜索</h1>
        <ul>
          <li class="item" v-for="item in searchHistory" :key="item" @click="selectHot(item)" >
            <span >{{item}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="scroll-wrapper" v-show="query">
      <scroll ref="refScroll" class="suggest-result top" :data="suggests">
        <ul>
          <li class="suggest-item border-topbottom" v-for="(str, index) in suggests" :key="index" @click.stop="selectItem(str)">
            <div v-html="getStyledText(str)"></div>
          </li>
        </ul>
      </scroll>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import SearchBox from 'base/search-box/search-box'
import { mapGetters } from 'vuex'
import { getSearchResult } from 'api/searchApi'
import Scroll from 'base/scroll/scroll'
import { saveSearchHistory } from 'common/js/cache'

export default {
  name: 'search-view',
  data () {
    return {
      query: '',
      searchTimer: null,
      suggests: []
    }
  },
  components: {
    SearchBox,
    Scroll
  },
  computed: {
    ...mapGetters({
      showSearchView: 'showSearchView',
      searchHistory: 'searchHistory'
    })
  },
  methods: {
    selectItem (str) {
      if (!str) return
      this.$router.push({ name: 'searchResultDisplay' })
      this.$store.commit('SET_SEARCH_HISTORY', saveSearchHistory(str))
      this.$store.commit('SET_SEARCH_STRING', str)
      this.$store.commit('SET_SEARCH_VIEW_STATE', false)
    },
    selectHot (p) {
      if (p) {
        this.$refs.searchBox.setQuery(p)
      }
    },
    getStyledText (fullText) {
      if (fullText && this.query) {
        let reg = new RegExp(this.query, 'g')
        fullText = fullText.replace(reg, '<span class="istrong">' + this.query + '</span>')
      }
      return fullText
    },
    doSearch () {
      if (!this.query) return
      this.selectItem(this.query)
    },
    setQuery (q) {
      // console.log('setQuery' + q)
      this.query = q
      clearTimeout(this.searchTimer)
      this.searchTimer = getSearchResult(q).then((resp) => {
        if (resp.error_code === 0) {
          this.suggests = resp.data
        }
      }, 100)
    },
    closeSearchView () {
      this.$store.commit('SET_SEARCH_VIEW_STATE', false)
    }
  },
  watch: {
    showSearchView (newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.$refs.searchBox.focus()
        })
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~common/stylus/mixin'

.search-view
  position: relative
  width: 100%
  height: 100%
  .top-title
    display: flex
    line-height: 40px
    background: #fff
    .i-wrapper
      flex: 0 0 40px
      padding-left: 10px
      .icon-arrow-left
        font-size: 18px
    .search-box-wrapper
      flex: 1
      margin: auto auto
    .dosearch-wrapper
      flex: 0 0 60px
      text-align: center
  .hot-search-wrapper
    background: #EBEBEC
    padding: 6px
    overflow: hidden
    max-height: 200px
    .title
      margin-bottom: 10px
      font-size: 14px
      color: black
      text-align: center
    .item
      display: inline-block
      padding: 5px 10px
      margin: 0 20px 10px 0
      border-radius: 6px
      font-size: 12px
      color: black
      border: 1px solid gray

  .scroll-wrapper
    position: absolute
    bottom: 0px
    left: 0px
    top: 40px
    right: 0px
    .suggest-result
      width: 100%
      height: 100%
      .suggest-item
        margin: 0 20px
        line-height: 40px
        font-size: 20px
        color: #888888
        no-wrap()
        >>>.istrong
          color: black
          font-size: 500
</style>
